<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        #container {
            width: 520px;
            margin: 10px auto;
        }

        .input {
            margin: 20px 0;
            width: 460px;
            height: 40px;
        }

        .input>label {
            display: inline-block;
            width: 140px;
            text-align: right;
        }

        .input>img {
            width: 150px;
            vertical-align: middle;
        }

        input[name=captcha] {
            vertical-align: middle;
        }

        form+div {
            margin-top: 20px;
        }

        form+div>a {
            text-decoration: none;
            color: darkcyan;
            font-size: 1.2em;
        }

        .button {
            width: 500px;
            text-align: center;
            margin-top: 20px;
        }

        .hint {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="container">
        <h1>用户登录</h1>
        <hr>
        <p class="hint">{{ hint }}</p>
        <form action="/login/" method="post">
            {% csrf_token %}
            <fieldset>
                <legend>用户信息</legend>
                <div class="input">
                    <label>用户名：</label>
                    <input type="text" name="username">
                </div>
                <div class="input">
                    <label>密码：</label>
                    <input type="password" name="password">
                </div>
                <div class="input">
                    <label>验证码：</label>
                    <input type="text" name="captcha">
                    <img id="code" src="/captcha/" alt="" width="150" height="40">
                </div>
            </fieldset>
            <div class="button">
                <input type="submit" id="mySubmit" value="登录">
                <input type="reset" value="重置">
            </div>
        </form>
        <div>
            <a href="/">返回首页</a>
            <a href="/register/">注册新用户</a>
        </div>
    </div>
</body>
<script>
    const form = document.getElementsByTagName("form")[0];
    form.onsubmit = (event) => {
        event.preventDefault();
        // const formData = {
        //     "username": form.querySelector("input[name='username']"),
        //     "password": form.querySelector("input[name='password']"),
        //     "captcha": form.querySelector("input[name='captcha']"),
        //     "csrfmiddlewaretoken": '{{ csrf_token }}'
        // };
        const formData = new FormData(form);
        debugger;
        fetch("/login/", {
            "method": "POST",
            "body": formData,
            headers: {
                'X-CSRFToken': form.querySelector('input[name="csrfmiddlewaretoken"]').value  // 确保传递 CSRF token
            }
        })
            .then(res => res.json())//fetch的json()方法是返回promise对象的
            .then(data => {
                if (data.redirect_url) {
                    // 存储 JWT 到 localStorage 或 sessionStorage
                    localStorage.setItem('access_token', data.access);
                    localStorage.setItem('refresh_token', data.refresh);
                    // 根据返回的 redirect_url 执行重定向
                    window.location.href = data.redirect_url;
                } else {
                    alert('登录失败，请检查用户名、密码和验证码是否正确。');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('登录失败，请稍后再试或联系管理员。');
            });
    };
</script>

</html>